<template>
	<div class="hu-wai">
		<Search />
		<div class="box-list">
			<div class="box" v-for="(item, index) in list" :key="index">
				<el-image class="cover" :src="item.img" fit="cover" />
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="WenHua">
import Search from "./Search.vue";

const list = [
	{ name: "国际文化交流活动", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/1.jpg" },
	{ name: "国学实践", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/2.png" },
	{ name: "汉服", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/3.jpg" },
	{ name: "蜡染研学", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/4.png" },
	{ name: "农事研学", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/5.png" },
	{ name: "皮影拾趣", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/6.png" },
	{ name: "文旅论坛", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/7.JPG" },
	{ name: "学术研讨会", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/wenhua/8.jpg" }
];
</script>
<style lang="scss" scoped>
.hu-wai {
	padding: 0 320px;
	padding-bottom: 110px;
	.box-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.box {
			width: 413px;
			padding-bottom: 20px;
			margin-top: 40px;
			font-size: 24px;
			font-weight: bold;
			color: rgb(25 25 25 / 100%);
			border-bottom: 1px solid #dedede;
			.cover {
				width: 100%;
				height: 275px;
				margin-bottom: 20px;
			}
		}
	}
}
</style>
